<template>
  <div class="box">
    <div class="title"></div>
    <div class="nav">
      <div class="nl">
        <view class="userinfo" v-if="userInfo.nickname">
          <img src="https://robohash.org/462767?set=set3" alt="" />
          <h3>{{ userInfo.nickname }}</h3>
        </view>

        <view class="userinfo" v-else>
           <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="" style="width: 50px;height: 50px; ">&emsp;
           
          <h3 @click="dian">未登录</h3>
        </view>
      </div>
      <div class="nr">
   <div class="icon">
          <van-icon name="setting-o" @click="set" />
        </div>
      </div>
    </div>

    <div class="conten">
      <div class="conten_top">
        <div @click="wen">
          <van-icon name="send-gift" /> 在线问诊</div>
        <div @click="jian">
          <van-icon name="send-gift" />健康档案</div>
      </div>
      <div class="conten_top">
        <div @click="medi">
          <van-icon name="send-gift" />用药建议</div>
        <div @click="you">
          <van-icon name="send-gift" />优选订单</div>
       </div>
      <div class="conten_top">
        <div @click="doctor">
          <van-icon name="send-gift" />我的医生</div>
        <div @click="su">
          <van-icon name="send-gift" />随访计划</div>
      </div>

    </div>

    <div class="foot">
      <div class="foot_title" @click="dz">
        <div>收货地址</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="foot_title" @click="card">
        <div>我的卡卷</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="foot_title" @click="yu">
        <div>门诊预约</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="foot_title" @click="jia">
        <div>价格公示</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="foot_title" @click="yi">
        <div>意见反馈</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="foot_title" @click="yong">
        <div>用户协议</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="foot_title" @click="yisi">
        <div>隐私协议</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="foot_title" @click="my">
        <div>关于我们</div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>


    </div>

    <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }" />
  </div>
</template>

<script setup lang="ts">
  import {
    ref,
  } from "vue"
  import {
    useRouter
  } from "vue-router"

const imgs=localStorage.getItem('imgs')
const show =ref(false)
const userInfo=JSON.parse(localStorage.getItem('userInfo')||'{}')
  const router = useRouter()
  const su=()=>{
    router.push('/followup')
  }
  const doctor=()=>{
    router.push('/mydoctor')
  }
  const medi=()=>{
    router.push('/medication')
  }
  const jian=()=>{
    router.push('/Health')
  }
  const my=()=>{
    router.push('/my')
  }
  const set = () => {
    router.push("/setup")
  }
  const you = () => {
    router.push("/Orders")
  }
  const wen = () => {
    router.push("/Interrogation")
  }
  const yisi = () => {
    router.push("/privacy")
  }
  const yong = () => {
    router.push("/usergreements")
  }
  const yi = () => {
    router.push("/opinion")
  }
  const jia = () => {
    router.push("/Publicity")
  }
  const yu = () => {
    router.push('/booking')
  }
  const dian = () => {
    router.push('/dialog')
  }
  const dz = () => {
    router.push("/address")
  }
  const card = () => {
    router.push("/cardrolls")
  }


 
</script>

<style lang="scss" scoped>
  .title {
    width: 100%;
    height: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    background: #e6f3ff;

  }

  .box {
    width: 100%;
    height: 100%;
    background: #f5f7f8;

    .foot {
      width: 100%;

      .foot_title {
        width: 330px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        margin-left: 15px;
        border-bottom: 1px solid #e7e4e4;
        line-height: 50px;

      }


    }

    .conten {
      width: 100%;
      height: 140px;
      margin-top: 3px;

      .conten_top {
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: space-around;

        div {
          width: 45%;
          text-align: center;
          margin-top: 6px;
          background: #fff;
          border-radius: 5px;
          line-height: 40px;
        }
      }
    }

    .nav {
      width: 100%;
      height: 120px;
      background-color: #e8f3fe;
      display: flex;

      .nl {
        width: 50%;

      }

      .nr {
        width: 50%;
      }

      .userinfo {
        display: flex;
        height: 100px;

        h3 {
          margin-left: 5px;
          line-height: 90px;
          font-size: 18px;
          color: #333;
          white-space: nowrap;
        }

        img {
          height: 70px;
          border-radius: 50%;
          margin-left: 20px;
        }
      }

      .icon {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 75px;

      }

    }




  }

</style>
